<!--
 * @Description:
 * @Author: lucl
 * @Date: 2021-06-25 09:03:47
<<<<<<< HEAD
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-06-27 15:41:57
=======
 * @LastEditors: lucl
 * @LastEditTime: 2021-06-27 19:42:55
>>>>>>> 6044aa92cc8efd23c880b1e6bd8da57d39d43114
-->
<template>
  <!-- 个人信息页面 -->
  <div>
    <!-- 头像 -->
    <div class="header" style="display: flex">
      <div style="width: 82px; margin: 0 auto" class="demo-basic--circle">
        <div class="block">
          <el-avatar :size="80" :src="circleUrl" />
        </div>
      </div>
      <div style="width: 82px; margin: 0 auto; position: relative">
        <div style="position: absolute; bottom: 0">
          <el-button type="text" @click="touVisible = true">修改头像</el-button>
        </div>
      </div>
    </div>
    <!-- 分割线 -->
    <el-divider />
    <!-- 个人信息详情 -->
    <div class="xiangqing">
      <div>登录用户： {{ personal.name }}</div>
      <div>用户姓名：{{ personal.realname }}</div>
      <div>用户手机： {{ personal.telephone }}</div>
      <div v-if="personal.gender == 'male'">用户性别：男</div>
      <div v-else>用户性别：女</div>
      <div>用户角色：{{ bbb }}</div>
      <div>用户生日：{{ Moment(personal.birth).format("YYYY-MM-DD") }}</div>
      <div>
        注册时间：{{
          Moment(personal.registerTime).format("YYYY-MM-DD hh:mm:ss")
        }}
      </div>
      <div>邮箱：{{ personal.email }}</div>
      <div>
        状态：
        <el-tag v-if="personal.status == '正常'" type="success">正常</el-tag>
        <el-tag v-else type="warning">{{ personal.status }}</el-tag>
      </div>
    </div>
    <el-divider />
    <div class="header" style="display: flex">
      <div style="width: 82px; margin: 0 auto; position: relative">
        <div style="position: absolute; bottom: 0">
          <el-button
            type="text"
            @click="geVisible = true"
          >修改个人信息</el-button>
        </div>
      </div>
    </div>

    <!-- 修改头像模态框 -->
    <div>
      <el-dialog title="更改头像" :visible.sync="touVisible" @close="toclose">
        <el-upload
          class="avatar-uploader"
          :action="uploadFileURL"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon" />
        </el-upload>
        <div slot="footer" class="dialog-footer">
          <el-button @click="touVisible = false">取 消</el-button>
          <el-button type="primary" @click="fixtou">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 更改个人信息 -->
    <div>
      <el-dialog title="更改个人信息" :visible.sync="geVisible">
        <el-form ref="ruleForm" :rules="rules" :model="personal">
          <el-form-item label="登录用户" :label-width="formLabelWidth">
            <el-input
              v-model="personal.name"
              :disabled="true"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item
            prop="realname"
            label="姓名"
            :label-width="formLabelWidth"
          >
            <el-input v-model="personal.realname" autocomplete="off" />
          </el-form-item>
          <el-form-item
            prop="gender"
            label="性别"
            :label-width="formLabelWidth"
          >
            <el-radio v-model="personal.gender" label="male">男</el-radio>
            <el-radio v-model="personal.gender" label="female">女</el-radio>
          </el-form-item>
          <el-form-item label="用户手机" :label-width="formLabelWidth">
            <el-input v-model="personal.telephone" autocomplete="off" />
          </el-form-item>
          <el-form-item label="用户邮箱" :label-width="formLabelWidth">
            <el-input v-model="personal.email" autocomplete="off" />
          </el-form-item>
          <el-form-item label="出生日期" :label-width="formLabelWidth">
            <el-date-picker
              v-model="riqi"
              type="date"
              placeholder="选择出生日期"
            />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="geVisible = false">取 消</el-button>
          <el-button type="primary" @click="fixge">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import Moment from 'moment'
import { showFileURL, uploadFileURL } from '@/utils/config'
import cookie from 'js-cookie'
import { info, alterUserface, saveOrUpdate } from '@/api/user'
// import { log } from '@antv/g2plot/lib/utils';
export default {
  data() {
    return {
      // 表单验证
      rules: {
        realname: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        gender: [
          { required: true, message: '请输入选择性别', trigger: 'blur' }
        ]
      },
      // 出生日期
      riqi: '',
      // 输入框宽度
      formLabelWidth: '120px',
      // 个人信息修改模态框
      geVisible: false,
      // 修改头像的表单
      form: {
        id: '',
        userface: ''
      },
      showFileURL,
      uploadFileURL,
      // 修改头像模态框
      touVisible: false,
      // 准备上传的头像地址
      imageUrl: '',
      // 用户本身自己的头像
      circleUrl:
        'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
      personal: {
        id: '',
        roles: []
      },
      bbb: ''
    }
  },
  computed: {},
  created() {
    this.getmessage()
  },
  mounted() {},
  methods: {
    // 重置表单
    toclose() {
      this.imageUrl = ''
      this.getmessage()
    },
    // moment时间处理
    Moment,
    // 修改个人信息操作
    async fixge() {
      this.$refs.ruleForm.validate(async(valid) => {
        if (valid) {
          this.personal.birth = Number(this.riqi)
          const res = await saveOrUpdate(this.personal)
          // console.log(res)
          this.getmessage()
          this.$notify.success({
            title: '成功',
            message: res.message
          })
          this.geVisible = false

          // alert('submit!');
        } else {
          // console.log('error submit!!');
          return false
        }
      })
    },
    // 确定修改头像操作
    async fixtou() {
      if (this.form.userface === '') {
        this.$notify.warning({
          title: '错误',
          message: '请上传头像'
        })
      } else {
        this.form.id = this.personal.id
        const res = await alterUserface(this.form)
        this.getmessage()
        this.touVisible = false
        this.$notify.success({
          title: '成功',
          message: res.message
        })
      }
    },
    // 上传文件之前判断图片的大小
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },

    handleAvatarSuccess(res, file) {
      // console.log('res','图片上传成功后的res');
      this.imageUrl = URL.createObjectURL(file.raw)
      this.form.userface = showFileURL + res.data.id
      console.log(this.form.userface)
    },
    // 获取用户信息
    async getmessage() {
      const a = cookie.get('Admin-Token')
      const res = await info({ token: a })
      // console.log(res);
      this.personal = res.data
      this.bbb = this.personal.roles[0].name
      this.circleUrl = this.personal.userFace
      // console.log(this.personal);
    }
  }
}
</script>
<style scoped>
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.header {
  display: flex;
}
.xiangqing > div {
  height: 50px;
}
</style>
